<!DOCTYPE html> 
<html> 
	<head> 
	<title>I am Petdo!</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<script src="jquery/jquery-1.7.1.min.js"></script>	
	<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.css" />
	<link rel="stylesheet" href="mobile.css" />
	<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
	<script src="swipe.js"></script>
	<!--<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>-->
	  
</head> 
<body > 
<!--  page overview -->
<div data-role="page" id="home" data-theme="p">
	<div data-role="header" data-theme="p">
      <h1>I am Petdo!</h1>
      <a href="index.html" rel="external" data-icon="refresh" data-iconpos="notext" >Refresh</a>
	</div><!-- /header -->
	<div data-role="content">
		<ul id="home-content" data-role="listview" ></ul>
	</div>
</div><!-- /page -->

<div data-role="dialog" id="offline-page" >
	<div data-role="header" data-theme="p">
		<h1>No Internet connection!</a>
	</div><!-- /header -->
	<div data-role="content">
		<p>Please connect your device to the Internet ...</p>
		<a href="index.html" data-role="button" rel="external" >Close</a>
	</div><!-- /content -->
</div><!-- /page -->

<script type="text/javascript">
	if (!navigator.onLine) {
		location.href="index.html#offline-page";
	}
</script>

<script type="text/javascript">
	var playListURL = 'http://query.yahooapis.com/v1/public/yql?q=select%20title%2Cdescription%20from%20rss%20where%20url%3D%22http%3A%2F%2Fiampetdo.com%2Frss.xml%22&format=json&callback=';

   $.ajaxSetup({
       timeout: 10000, // Microseconds, for the laughs.  Guaranteed timeout.
       error: function(request, status, maybe_an_exception_object) {
           if(status = 'timeout')
              location.href="notconnect.html"
       }
   });

   $.getJSON(playListURL, function(data,textStatus) {
	var list_thumb = "";
	var list_data = "";

	$.each(data.query.results.item, function(i, item) {
		var feedTitle = item.title;
		var feedDesc = item.description;
		var matches = feedDesc.match(/<img[^>]+>/ig);      

		list_thumb += '<li>';
		list_thumb += '<a href="#p'+i+'">';
		list_thumb += '<div id="label">'+feedTitle+'</div>';
		list_thumb += ' '+matches[0]+' ';
		list_thumb += '</a>';
		list_thumb += '</li>';


		/* create page */
		list_data+='<div data-role="page" id="p'+i+'" data-theme="p" >';
		list_data+='<div data-role="header" data-theme="p"><h1>'+ item.title +'</h1></div>';
		list_data+='<div data-role="content">';
		list_data+=''+matches[0]+' '+matches[1]+' '+matches[2]+' '+matches[3];
		list_data+='</div>';
		list_data+='</div>';
	});
	$(list_thumb).appendTo("#home-content");
	$(list_data).appendTo("body");
 });
</script>
</body>
</html>

